---
title: 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
---

这个问题与关于 [编写高效 CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题相关。浏览器从最右侧（关键选择器）到左侧匹配选择器。浏览器根据关键选择器过滤 DOM 中的元素，并向上遍历其父元素以确定匹配项。选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。

例如，对于选择器 `p span`，浏览器首先找到所有 `<span>` 元素，并向上遍历其父元素，直到根元素，以找到 `<p>` 元素。对于特定的 `<span>`，一旦找到 `<p>`，它就知道 `<span>` 与选择器匹配，并且可以停止遍历其父元素。
